<template>
    <div>
        <el-form ref="formLogin" :model="formLogin" label-width="80px" class="login-box">
            <h3 class="login-title">{{title}}</h3>
            <el-form-item label="账号" prop="username">
                <el-input type="text" placeholder="请输入账号" v-model="formLogin.username" @keyup.enter.native="menuLogin"/>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" placeholder="请输入密码" v-model="formLogin.password"
                          @keyup.enter.native="menuLogin"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="menuLogin" :loading="formLoginLoading"
                           @keyup.enter.native="menuLogin">登录
                </el-button>
                <el-button @click="menuLoginReset">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    import {moduleLogin} from "@/api/login";
    export default {
        props: {
            title: {
                type: String,
                required: "模块登录"
            },
        },
        data() {
            return {
                // 表单参数
                formLogin: {
                    username: null,
                    password: null
                },
                formLoginLoading: false
            };
        },
        mounted: function () {

        },
        methods: {
            menuLogin(){
                if(!this.formLogin.username){
                    this.$modal.msgWarning("请输入用户名");
                    return;
                }
                if(!this.formLogin.password){
                    this.$modal.msgWarning("请输入密码");
                    return;
                }
                this.formLoginLoading = true;
                moduleLogin(this.formLogin).then(response => {
                    if(response.msg == "登录成功"){
                        this.$modal.msgSuccess(response.msg)
                        this.$emit('update:moduleLoginStatus',true)
                    }else{
                        this.$modal.msgError(response.msg)
                    }
                    this.formLoginLoading = false;
                });
            },
            menuLoginReset(){
                this.formLogin = {
                    username: null,
                    password: null
                };
                this.resetForm("formLogin");
            },
        }
    };
</script>
<style>
    .login-box {
        border: 1px solid #DCDFE6;
        width: 500px;
        margin: 180px auto;
        padding: 35px 35px 15px 35px;
        border-radius: 20px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        box-shadow: 0 0 25px #909399;
    }

    .login-title {
        text-align: center;
        margin: 0 auto 40px auto;
        color: #303133;
    }
</style>

